<template>
    <div class="panel">
        <!-- 画布 -->
        <div class="panel-page" v-show="!cardStore.curComponet">
            <div class="panel-title">页面设置</div>
            <el-tabs type="card" v-model="pageActiveName" class="my-el-tabs">
                <el-tab-pane class="tab-content" label="属性" name="first">
                    <el-scrollbar>
                        <el-form :model="cardStore.editor" style="padding: 10px" label-position="left" size="small"
                            label-width="100px">
                            <el-form-item label="页面名称">
                                <el-input v-model="cardStore.name" />
                            </el-form-item>
                            <el-form-item label="宽度">
                                <el-input v-model="pageSize.width" @change="pageSizeChange($event, 'width')">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="高度">
                                <el-input v-model="pageSize.height" @change="pageSizeChange($event, 'height')">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="画布颜色">
                                <el-color-picker v-model="cardStore.editor.backgroundColor" show-alpha />
                            </el-form-item>
                            <div style="display: flex; align-items: center;">
                                <h3>
                                    布局设置
                                </h3>
                                <el-popover placement="top" :width="220" trigger="hover">
                                    <template #reference>
                                        <el-button type="primary" style="margin-left: 8px;" circle size="small">
                                            <Icon name="el-icon-Plus" size="14" color="#fff" />
                                        </el-button>
                                    </template>
                                    <div>
                                        <h5 style="margin: 8px 0;">应用区间</h5>
                                        <el-row :gutter="8">
                                            <el-col :span="12">
                                                <el-input placeholder="最小值" v-model="layoutGap.min">
                                                    <template #suffix>
                                                        px
                                                    </template>
                                                </el-input>
                                            </el-col>
                                            <el-col :span="12">
                                                <el-input placeholder="最大值" v-model="layoutGap.max">
                                                    <template #suffix>
                                                        px
                                                    </template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                        <el-divider content-position="left">常用</el-divider>
                                        <el-button type="primary" text bg @click="layoutGap.min = 0, layoutGap.max = 375">
                                            0px-375px
                                        </el-button>
                                        <el-button type="primary" text bg @click="layoutGap.min = 0, layoutGap.max = 750">
                                            0px-750px
                                        </el-button>
                                    </div>
                                    <div style="text-align: right; margin-top: 10px">
                                        <el-button type="primary" text bg @click="addLayout">保存</el-button>
                                    </div>
                                </el-popover>

                            </div>
                            <div v-for="(item, index ) in cardStore.layouts" :key="index">
                                <el-tag closable class="layout_tag" @click="openDrawer(item)" @close="delLayoutTag(item)">
                                    {{ item.min }}px-{{ item.max }}px
                                </el-tag>
                            </div>

                            <el-divider content-position="left">默认布局</el-divider>
                            <el-form-item label="内边距">
                                <el-row :gutter="8">
                                    <el-col :span="6">
                                        <el-input v-model="cardStore.padding[0]"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-input v-model="cardStore.padding[1]"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-input v-model="cardStore.padding[2]"></el-input>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-input v-model="cardStore.padding[3]"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <h5>
                                FLEX布局
                            </h5>
                            <div class="layout_select">
                                <el-tag @click="cardStore.layout = item.value" v-for="item in layoutOptions.flex"
                                    :key="item.value" :type="cardStore.layout === item.value ? 'danger' : 'info'">{{
                                        item.label
                                    }}</el-tag>

                            </div>
                            <h5>
                                缩放布局
                            </h5>
                            <div class="layout_select">
                                <el-tag @click="cardStore.layout = item.value" v-for="item in layoutOptions.scale"
                                    :key="item.value" :type="cardStore.layout === item.value ? 'danger' : 'info'">{{
                                        item.label
                                    }}</el-tag>
                            </div>

                        </el-form>
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="脚本" name="second">
                    <externalSelect :externals="cardStore.editor.externals" />
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 组件 -->
        <div class="panel-com" v-if="cardStore.curComponet">
            <el-tabs type="card" v-model="activeName" class="my-el-tabs">
                <el-tab-pane lazy label="数据" name="first">
                    <dataPanel></dataPanel>
                </el-tab-pane>
                <el-tab-pane class="tab-content" style="padding: 10px" label="属性" name="second">
                    <!-- 公共属性 -->
                    <el-scrollbar>
                        <el-form :model="card.style" label-position="left" size="small" label-width="80px">
                            <el-form-item label="名称">
                                <el-input v-model="card.name" />
                            </el-form-item>
                            <el-form-item label="水平位置">
                                <el-input v-model="card.style.left">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="垂直位置">
                                <el-input v-model="card.style.top">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="宽度">
                                <el-input v-model="card.style.width">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="高度">
                                <el-input v-model="card.style.height">
                                    <template #suffix>
                                        px
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="角度">
                                <el-input v-model="card.style.rotate">
                                    <template #suffix>
                                        deg
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="版本号" v-if="!card.group">
                                <el-select v-model="card.cardJson.version" @change="versionChange">
                                    <el-option v-for="item in state.versionOptions" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-form>
                        <!-- 卡片属性 -->
                        <component v-if="card.panelComponent" :is="card.panelComponent"
                            :initProp="card.cardJson.initProp" />
                    </el-scrollbar>
                </el-tab-pane>
                <el-tab-pane style="padding: 10px" label="交互" name="third">
                    <!-- 入场动画 -->
                    <el-form :model="card.interactive" label-position="left" size="small" label-width="100px">
                        <el-form-item label="动画类型">
                            <el-select v-model="card.interactive.enterAnimation.type">
                                <el-option label="无" value=""></el-option>
                                <el-option label="移入" value="slider"></el-option>
                            </el-select>
                        </el-form-item><el-form-item label="渐隐渐现">
                            <el-checkbox v-model="card.interactive.enterAnimation.isOpacity" label="" />
                        </el-form-item>
                        <el-form-item label="速率">
                            <el-select v-model="card.interactive.enterAnimation.timingFunction">
                                <el-option label="匀速" value="linear"></el-option>
                                <el-option label="低速-加快-慢速" value="ease"></el-option>
                                <el-option label="低速开始" value="ease-in"></el-option>
                                <el-option label="低速结束" value="ease-out"></el-option>
                                <el-option label="低速开始和结束" value="ease-in-out"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="方向">
                            <el-select v-model="card.interactive.enterAnimation.direction">
                                <el-option label="从左往右" value="slideLeftSmall"></el-option>
                                <el-option label="从右往左" value="slideRightSmall"></el-option>
                                <el-option label="从上往下" value="slideTopSmall"></el-option>
                                <el-option label="从下往上" value="slideBottomSmall"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="持续时间(ms)">
                            <el-input v-model="card.interactive.enterAnimation.duration" />
                        </el-form-item>
                        <el-form-item label="延时(ms)">
                            <el-input v-model="card.interactive.enterAnimation.delay" />
                        </el-form-item>
                    </el-form>
                    <!-- 回调函数 -->
                    <!-- <el-tabs v-model="card.interactive.callback.active" type="card">
                        <el-tab-pane v-for="(item, index) in card.interactive.callback.list" :key="index"
                            :label="'回调' + (index + 1)" :name="index + ''">
                            <el-form :model="item" label-position="left" size="small" label-width="100px">
                                <el-form-item label="动画类型">
                                    <el-select v-model="item.actions.active">
                                        <el-option label="鼠标点击" value="click"></el-option>
                                    </el-select>
                                </el-form-item>

                                <el-form-item label="字段值">
                                    <el-input v-model="item.field" />
                                </el-form-item>
                                <el-form-item label="变量值">
                                    <el-input v-model="item.variable" />
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs> -->
                    <!-- 自定义事件 -->
                    <!-- <el-tabs v-model="card.interactive.events.active" type="card">
                        <el-tab-pane v-for="(item, index) in card.interactive.callback.list" :key="index"
                            :label="'事件' + (index + 1)" :name="index + ''">
                            <el-form :model="item" label-position="left" size="small" label-width="100px">
                                <el-form-item label="事件类型">
                                    <el-select v-model="item.eventType">
                                        <el-option label="鼠标点击" value="click"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-tabs v-model="item.actions.active" type="card">
                                    <el-tab-pane v-for="(action, actionIndex) in item.actions.list" :key="actionIndex"
                                        :label="'动作' + (actionIndex + 1)" :name="actionIndex + ''">
                                        <el-form-item label="事件类型">
                                            <el-select v-model="item.actions.active">
                                                <el-option label="鼠标点击" value="click"></el-option>
                                            </el-select>
                                        </el-form-item>
                                        <el-form-item label="变量值">
                                            <el-input v-model="item.variable" />
                                        </el-form-item>
                                    </el-tab-pane>
                                </el-tabs>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs> -->
                </el-tab-pane>
            </el-tabs>
        </div>
        <el-drawer v-model="drawer" title="分辨率设置" direction="rtl">
            <el-form v-model="editLayoutItem">
                <el-form-item label="类型">
                    <el-radio-group v-model="editLayoutItem.type">
                        <el-radio label="layout">布局设置</el-radio>
                        <el-radio label="link">跳转链接</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-if="editLayoutItem.type === 'layout'">
                    <el-form-item label="内边距">
                        <el-row :gutter="8">
                            <el-col :span="6">
                                <el-input v-model="editLayoutItem.padding[0]"></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="editLayoutItem.padding[1]"></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="editLayoutItem.padding[2]"></el-input>
                            </el-col>
                            <el-col :span="6">
                                <el-input v-model="editLayoutItem.padding[3]"></el-input>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <h5>
                        FLEX布局
                    </h5>
                    <div class="layout_select">
                        <el-tag @click="editLayoutItem.layout = item.value" v-for="item in layoutOptions.flex"
                            :key="item.value" :type="editLayoutItem.layout === item.value ? 'danger' : 'info'">{{
                                item.label
                            }}</el-tag>

                    </div>
                    <h5>
                        缩放布局
                    </h5>
                    <div class="layout_select">
                        <el-tag @click="editLayoutItem.layout = item.value" v-for="item in layoutOptions.scale"
                            :key="item.value" :type="editLayoutItem.layout === item.value ? 'danger' : 'info'">{{
                                item.label
                            }}</el-tag>
                    </div>
                </div>
                <div v-else>
                    <el-form-item label="链接">
                        <el-input v-model="editLayoutItem.link"></el-input>
                    </el-form-item>
                </div>
            </el-form>
            <template #footer>
                <div style="flex: auto">
                    <el-button type="primary" @click="drawer = false">确定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref, computed, reactive, watch, defineAsyncComponent } from 'vue'
import { userCardStore, getBestPos } from '../../store/userCardStore'
import { queryAssembly } from '/@/api/assembly'
import externalSelect from '/@/pages/editor/components/externalSelect.vue'
const dataPanel = defineAsyncComponent(() => {
    return import('/@/pages/editor/components/panel/dataPanel.vue')
})
const cardStore = userCardStore()

const layoutGap = ref({
    min: '',
    max: ''
})
const addLayout = () => {
    cardStore.layouts.unshift({
        min: parseInt(layoutGap.value.min),
        max: parseInt(layoutGap.value.max),
        type: 'layout',
        layout: '0',
        padding: [0, 0, 0, 0],
        link: ''
    })
    layoutGap.value = {
        min: '',
        max: ''
    }
}
const delLayoutTag = (item) => {
    cardStore.layouts.splice
    cardStore.layouts.splice(cardStore.layouts.indexOf(item), 1)
}

const drawer = ref(false)
const editLayoutItem = ref({})
const openDrawer = (item) => {
    editLayoutItem.value = item
    drawer.value = true
}

const pageSize = ref({
    width: cardStore.editor.width,
    height: cardStore.editor.height
})
const pageSizeChange = (val, type) => {
    cardStore.editor[type] = pageSize.value[type]
    const pos = getBestPos(cardStore.editor.width, cardStore.editor.height)
    cardStore.setEditorTransform(pos, 'touch')
}

let activeName = ref('second')
const pageActiveName = ref('first')
const card = computed(() => {
    return cardStore.curComponet
})

watch(card, () => {
    activeName.value = 'second'
})

const versionMap = {}
const state = reactive({
    versionOptions: [],
})

watch(card, async () => {
    if (!card.value || card.value.group) return
    if (versionMap[card.value.assembly_sort_id]) {
        state.versionOptions = versionMap[card.value.assembly_sort_id]
        return
    }
    // 获取版本号
    const res = await queryAssembly(card.value.assembly_sort_id)
    state.versionOptions = res.map((item) => {
        return {
            value: item.version,
            label: item.version,
        }
    })
    versionMap[card.value.assembly_sort_id] = state.versionOptions
})

// 版本切换
const versionChange = (version) => {
    cardStore.changeVersion(version)
}


// 布局
const layoutOptions = {
    flex: [
        { label: '默认', value: '0' },
        { label: '居中', value: '1' },
        { label: '水平居中', value: '2' },
        { label: '垂直居中', value: '3' },
    ],
    scale: [
        { label: '缩放至页面完整显示', value: '4' }
    ]
}
</script>
<style lang="less" scoped>
.panel-title {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    text-align: center;
    font-weight: normal;
    color: rgba(0, 0, 0, 0.7);
}

.tab-content {
    height: calc(100vh - 144px);
}

.layout_select {
    margin-bottom: 12px;

    .el-tag {
        margin-right: 8px;
        cursor: pointer;
    }
}

.layout_tag {
    cursor: pointer;
    transition: transform .3s;

    &:hover {
        transform: scale(1.1);
    }
}

@keyframes slider-inleft {
    0% {
        transform: translateX(-100vw);
    }

    100% {
        transform: translateX(0);
    }
}
</style>
